<template>
	<view class="cart">
		<view class="cart-title">
			礼物详情
		</view>
		<view class="cart-sum">
			<view class="cart-sum-title">
				礼物数量
			</view>
			<view class="cart-sum-num">
				{{sum}} 件
			</view>
		</view>
		<view class="cart-notes">
			<text>备注</text>
			<textarea maxlength="20" v-model="notes" class="cart-notes-textarea"
				placeholder-style="color:#686868;font-size:28rpx;" />
		</view>

		<scroll-view scroll-y="true" :style="{height: clientHeight*2 +'rpx'}">
			<view class="cart-list">
				<view class="cart-list-item" v-for="(item,index) in goodsList" :key="index">
					<view class="cart-list-item-top">
						<view class="cart-list-item-top-left">
							<image :src="item.Images" mode=""></image>
						</view>
						<view class="cart-list-item-top-right">
							<view class="cart-list-item-top-right-header u-line-2">
								{{item.ProductName}}
							</view>
							<!--              <view class="cart-list-item-top-right-center">
               {{item.Style}}
              </view> -->
							<view class="cart-list-item-top-right-footer">
								<view class="cart-list-item-top-right-footer-left">
									<text class="f-24">￥</text>
									<text>{{ Number(item.Price) * Number(item.sum)}}</text>
								</view>
								<view class="cart-list-item-top-right-footer-right">
									<!-- <u-number-box button-size="28" v-model="item.sum" :min="1" :max="10"></u-number-box> -->
								</view>
							</view>
						</view>
					</view>

					<view class="cart-list-item-bottom" @click="onDelete(item.id,index)">
						删除
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="cart-footer">
			<view class="cart-footer-left">
				<text class="f-20 m-r-20">共 {{sum}} 件</text>
				<text class="f-24 m-r-10">合计</text>
				<text class="f-24">￥</text>
				<text>{{total}}</text>
			</view>
			<view class="cart-footer-right" @click="onConfirm">
				确认
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				notes: '礼物虽轻,唯愿你健康开心~~', //备注
				AnchorID: -1, //赠送对象id
				clientHeight: 0, //scroll的高度
				// 选中商品数组
				goodsList: []
			}
		},
		computed: {
			sum() {
				let sum = 0
				this.goodsList.forEach(item => {
					sum += Number(item.sum)
				})
				return sum
			},
			total() {
				let total = 0
				this.goodsList.forEach(item => {
					total += Number(item.Price) * Number(item.sum)
				})
				return total
			},
		},
		onLoad(e) {
			this.goodsList = JSON.parse(e.goodsList)
			this.AnchorID = e.AnchorID
			this.getClineHeight()

		},
		methods: {
			//点击确认
			onConfirm() {

				let _this = this;

				uni.showModal({
					title: '赠送确认',
					content: '您确认要赠送礼物吗',
					confirmText: "确定",
					success: async function(res) {
						if (res.confirm) {
							let submitOrder = await _this.$api.post('Order/Submit', {
								ShopID: 0,
								Price: _this.total,
								Remark: _this.notes,
								IsSelfTake: 0,
								AnchorID: _this.AnchorID,
								ItemStr: JSON.stringify(_this.goodsList)
							});

							console.log('订单success' + JSON.stringify(submitOrder.data));

							console.log(_this.goodsList[0].ProductName);
							// 支付请求
							let pres = await _this.$api.post('Payment/PayV2', {
								total_fee: _this.total,
								EventType: '商城礼物',
								EventID: submitOrder.data,
								body: '商城购买' + _this.goodsList[0].ProductName,
								// #ifdef MP-WEIXIN
								PayChannel: "weixin",
								// #endif
								// #ifdef APP
								PayChannel: "app"
								// #endif
							});


							console.log(JSON.stringify(pres.data));

							// 已余额支付成功
							if (pres.data == 0) {
								console.log('余额支付成功')
								uni.$emit('customSendMessage', {
									id: submitOrder.data
								})
								uni.navigateBack({
									delta: 1
								})
								return;
							}

							// 支付成功返回的内容
							let payObj = JSON.parse(pres.data);

							// 调用uni支付API
							uni.requestPayment({
								// 服务提供商
								provider: 'wxpay',
								// #ifdef APP
								orderInfo: payObj,
								// #endif
								// #ifdef MP-WEIXIN
								timeStamp: payObj.timeStamp,
								nonceStr: payObj.nonceStr,
								package: payObj.package,
								signType: payObj.signType,
								paySign: payObj.paySign,
								// #endif
								success(res) {
									console.log('支付成功', res)
									uni.$emit('customSendMessage', {
										id: submitOrder.data
									})
									uni.navigateBack({
										delta: 1
									})
								},
								fail(err) {
									_this.$pv.msg('支付失败');
								}
							});

						} else if (res.cancel) {
							is_sure = false;
						}
					}
				});



			},
			// 删除选中商品
			onDelete(id, index) {
				this.goodsList.splice(index, 1)
			},
			//获取手机状态栏高度
			getBarHeight() {
				const res = uni.getSystemInfoSync()
				if (res.platform === 'ios') {
					return 44 + res.statusBarHeight
				} else if (res.platform === 'android') {
					return 48 + res.statusBarHeight
				} else {
					return 0;
				}
			},
			//获取scroll可视区域高度
			getClineHeight() {
				const res = uni.getSystemInfo({
					success: (res => {
						this.clientHeight = res.windowHeight - uni.upx2px(514) - this.getBarHeight();
					})
				});
			},



		}
	}
</script>

<style lang="scss" scoped>
	.cart {
		padding: 0 40rpx;
		width: 100%;
		box-sizing: border-box;

		.cart-title {
			color: #fff;
			font-size: 40rpx;
			line-height: 47px;
			height: 94rpx;
		}

		.cart-sum {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 114rpx;
			border-bottom: 2rpx solid #d2d2d2;
			font-size: 30rpx;
		}

		.cart-notes {
			width: 100%;
			padding: 30rpx 0;
			height: 206rpx;

			.cart-notes-textarea {
				width: auto;
				height: 100rpx;
				margin-top: 20rpx;
				border: 2rpx solid #d2d2d2;
				padding: 20rpx;
				border-radius: 12rpx;
			}
		}

		.cart-list {
			width: 100%;

			.cart-list-item {
				height: 268rpx;
				padding: 20rpx 0;
				margin-bottom: 20rpx;
				width: 100%;
				display: flex;
				flex-direction: column;
				border-bottom: 2rpx solid #d2d2d2;

				.cart-list-item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 176rpx;

					.cart-list-item-top-left {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						// margin-right: 20rpx;
						width: 26%;

						image {
							width: 130rpx;
							height: 130rpx;
						}
					}

					.cart-list-item-top-right {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.cart-list-item-top-right-header {
							color: #ffffff;
							font-size: 28rpx;
							height: 72rpx;
						}

						.cart-list-item-top-right-center {
							font-size: 24rpx;
							margin-top: 16rpx;
						}

						.cart-list-item-top-right-footer {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.cart-list-item-top-right-footer-left {
								display: flex;
								align-items: center;

								text {
									color: #B98B51;
								}

								.f-24 {
									font-size: 24 rpx;
								}
							}

							.cart-list-item-top-right-footer-right {}
						}
					}
				}

				.cart-list-item-bottom {
					font-size: 28rpx;
					margin-top: 30rpx;
					border: 2rpx solid #d2d2d2;
					display: flex;
					justify-content: center;
					align-items: center;
					align-self: flex-end;
					border-radius: 12rpx;
					padding: 10rpx 30rpx;
				}
			}
		}

		.cart-footer {
			box-sizing: border-box;
			padding: 0 40rpx;
			position: fixed;
			width: 100%;
			height: 120rpx;
			bottom: 0%;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.cart-footer-left {
				.m-r-10 {
					margin-right: 10rpx;
				}

				.m-r-20 {
					margin-right: 20rpx;
				}

				.f-20 {
					font-size: 20rpx;
				}

				.f-24 {
					font-size: 24rpx;
				}
			}

			.cart-footer-right {
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 18rpx;
				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
				color: #4C310C;
				width: 200rpx;
				height: 80rpx;
			}
		}
	}
</style>